<!--  -->
<template>
  <div class=''>
    <div v-show="contentList.length === 0" class="addFirRule">
      <el-button type="primary" @click="addFirRuleFun">选择设备</el-button>
      <el-button type="primary" @click="closePopup">关 闭</el-button>
    </div>
    <div class="setLineBox" v-show="contentList.length > 0">
      <div class="indextitle">序号</div>
      <div class="firtitleBox">设备名称</div>
      <div class="centerModule">
        区间数据
      </div>
      <div class="titleBoxSwitch">开关</div>
      <div class="titleBox">新增规则</div>
      <div class="titleBox">操作</div>
    </div>
    <div class="realBox" v-show="contentList.length > 0" v-for="(item,index) in contentList" :key="index">
      <div class="indextitle">
        {{ index + 1 }}
      </div>
      <div class="firvalueBox">
        <el-popover
          placement="top-start"
          width="200"
          trigger="hover"
          :content="item.tahName">
          <div slot="reference">
            {{ item.tahName }}
          </div>
        </el-popover>
      </div>
      <div class="outSideBox">
        <div class="valueBox" v-show="item.tagDeviceType === 1">
          {{ item.maxH }}
        </div>
        <div class="valueBox" v-show="item.tagDeviceType === 1">
          {{ item.minH }}
        </div>
        <div class="valueBox" v-show="item.tagDeviceType === 1">
          {{ item.maxT }}
        </div>
        <div class="valueBox" v-show="item.tagDeviceType === 1">
          {{ item.minT }}
        </div>
        <div class="valueBox" v-show="item.tagDeviceType === 3 || item.tagDeviceType === 5">
          {{ item.maxAq }}
        </div>
        <div class="valueBox" v-show="item.tagDeviceType === 3 || item.tagDeviceType === 5">
          {{ item.minAq }}
        </div>
        <div class="valueBox" v-show="item.tagDeviceType === 3 || item.tagDeviceType === 5">
          {{ item.maxTrd }}
        </div>
        <div class="valueBox" v-show="item.tagDeviceType === 3 || item.tagDeviceType === 5">
          {{ item.minTrd }}
        </div>
        <div class="lastValueBox" @click="setDataListFun(index,item.tagDeviceType,item.tahName,item.tahId)">
          修改/查看区间数据
        </div>
      </div>
      <div class="valueBoxSwitch">
        <div v-show="item.switchRuleList.length === 0">
          <i @click="addSwitchData(index,'fir')" class="el-icon-circle-plus" style="font-size: 30px; margin-top: 5px;"></i>
        </div>
        <div class="setColor" v-show="item.switchRuleList.length > 0" @click="watchAllSwitch(index,'sen')">
          查看全部开关
        </div>
      </div>
      <div class="valueBox_icon">
        <i @click="addSwitchRule" class="el-icon-plus" style="font-size: 30px; margin-top: 5px;"></i>
      </div>
      <div class="valueBox_icon">
        <i @click="deleteContentData(index)" class="el-icon-delete" style="font-size: 30px; margin-top: 5px;"></i>
      </div>
    </div>

    <el-dialog
      title="选择设备"
      :visible.sync="DeviceShow"
      :show-close="false"
      :modal="false"
      :close-on-click-modal="false"
      width="50%">
      <div>
        <el-select
          ref="optionRef"
          v-model="tahValue"
          placeholder="请选择"
          @change="beforVerifyFun"
          >
          <el-option
            v-for="item in tahStartList"
            :key="item.id"
            :label="item.name"
            :value="item">
          </el-option>
        </el-select>
        <el-button type="primary" @click="verifyTah" style="margin-left: 10px;">确 定</el-button>
        <el-button @click="closeTah" style="margin-left: 10px;">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="选择开关设备"
      :visible.sync="switchDeviceShow"
      :show-close="true"
      :modal="false"
      width="50%">
      <div>
        <el-form
          :model="switchFrom"
          :rules="switchRules"
          ref="numberValidateForm"
          label-width="120px"
          class="demo-ruleForm">
          <el-form-item label="请选择开关" prop="switchId">
            <el-select
              @change="changeSwitch"
              ref="optionSwitchRef"
              v-model="switchFrom.switchId"
              placeholder="请选择"
              >
              <el-option
                v-for="item in switchStartList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="switchIndex !== undefined" label="请选择开关路数" prop="num">
            <el-select
              v-model="switchFrom.num"
              placeholder="请选择"
              >
              <el-option
                v-for="item in mySwitchCount"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开关状态" prop="delivery">
            <el-switch v-model="switchFrom.value"></el-switch>
          </el-form-item>
          <el-button type="primary" @click="verifySwitch" style="margin-left: 10px;">确 定</el-button>
        </el-form>
      </div>
    </el-dialog>

    <el-dialog
      title="查看开关设备"
      :visible.sync="showAllSwitch"
      :show-close="true"
      :modal="false"
      width="50%">
      <el-button type="primary" @click="addSwitchAgain" style="margin-bottom: 10px;">新增开关</el-button>
      <el-table
        :data="allSwitchData"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="switchName"
          label="开关名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="num"
          label="开关路数"
          width="180">
        </el-table-column>
        <el-table-column
          label="开关默认状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.value"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="deleltSwitch(scope.$index)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <div class="addFirRule" v-show="contentList.length > 0">
      <el-button type="primary" @click="submitButton">提 交</el-button>
      <el-button type="primary" @click="closePopup">关 闭</el-button>
    </div>
    <!-- 设置设备区间数据 -->
    <el-dialog
      title="设置设备区间数据"
      :visible.sync="showDataList"
      :show-close="true"
      :modal="false"
      @close="closeShowData(1)"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="70%">
      <h1>{{ tahValue }}</h1>
      <!-- 温湿度 -->
      <div v-show="deviceTypeID === 1" class="fillOutData">
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">温度上限</div>
          <el-input v-model="firObj.maxH"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">温度下限</div>
          <el-input v-model="firObj.minH"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">湿度上限</div>
          <el-input v-model="firObj.maxT"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">湿度下限</div>
          <el-input v-model="firObj.minT"></el-input>
        </div>
      </div>
      <!-- 土壤温湿度 -->
      <div v-show="deviceTypeID === 3 || deviceTypeID === 5" class="fillOutData">
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">氨气上限</div>
          <el-input v-model="gasObj.maxAq"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">氨气下限</div>
          <el-input v-model="gasObj.minAq"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">氮含量上限</div>
          <el-input v-model="gasObj.maxTrd"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">氮含量下限</div>
          <el-input v-model="gasObj.minTrd"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">电导率上限</div>
          <el-input v-model="gasObj.maxTrddl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">电导率下限</div>
          <el-input v-model="gasObj.minTrddl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">肥力上限</div>
          <el-input v-model="gasObj.maxTrfl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">肥力下限</div>
          <el-input v-model="gasObj.minTrfl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">钾含量上限</div>
          <el-input v-model="gasObj.maxTrj"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">钾含量下限</div>
          <el-input v-model="gasObj.minTrj"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">磷含量上限</div>
          <el-input v-model="gasObj.maxTrl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">磷含量下限</div>
          <el-input v-model="gasObj.minTrl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">酸碱度上限</div>
          <el-input v-model="gasObj.maxTrsjd"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">酸碱度下限</div>
          <el-input v-model="gasObj.minTrsjd"></el-input>
        </div>
      </div>
      <el-button type="primary" @click="submitSetData" style="margin-top: 10px;">确 定</el-button>
    </el-dialog>
    <!-- 修改设备区间数据 -->
    <el-dialog
      title="修改设备区间数据"
      :visible.sync="showSetDataList"
      :show-close="true"
      @close="closeShowData(2)"
      :modal="false"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="70%">
      <h1>{{ tahValue }}</h1>
      <!-- 温湿度 -->
      <div v-show="deviceTypeID === 1" class="fillOutData">
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">温度上限</div>
          <el-input v-model="firObj.maxH"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">温度下限</div>
          <el-input v-model="firObj.minH"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">湿度上限</div>
          <el-input v-model="firObj.maxT"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">湿度下限</div>
          <el-input v-model="firObj.minT"></el-input>
        </div>
      </div>
      <!-- 土壤温湿度 / 氨气 -->
      <div v-show="deviceTypeID === 3 || deviceTypeID === 5" class="fillOutData">
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">氨气上限</div>
          <el-input v-model="gasObj.maxAq"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">氨气下限</div>
          <el-input v-model="gasObj.minAq"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">氮含量上限</div>
          <el-input v-model="gasObj.maxTrd"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">氮含量下限</div>
          <el-input v-model="gasObj.minTrd"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">电导率上限</div>
          <el-input v-model="gasObj.maxTrddl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">电导率下限</div>
          <el-input v-model="gasObj.minTrddl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">肥力上限</div>
          <el-input v-model="gasObj.maxTrfl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">肥力下限</div>
          <el-input v-model="gasObj.minTrfl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">钾含量上限</div>
          <el-input v-model="gasObj.maxTrj"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">钾含量下限</div>
          <el-input v-model="gasObj.minTrj"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">磷含量上限</div>
          <el-input v-model="gasObj.maxTrl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">磷含量下限</div>
          <el-input v-model="gasObj.minTrl"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">酸碱度上限</div>
          <el-input v-model="gasObj.maxTrsjd"></el-input>
        </div>
        <div class="inputBox">
          <div style="height: 30px; text-align: center; line-height: 30px;">酸碱度下限</div>
          <el-input v-model="gasObj.minTrsjd"></el-input>
        </div>
      </div>
      <el-button type="primary" @click="updateSetData" style="margin-top: 10px;">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { componentRuleAdd } from '@/api/componentRule'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    deciveArr: {
      type: Array,
      default: () => []
    },
    ruleId: {
      type: Number,
      default: 0
    }
  },
  data () {
    // 这里存放数据
    return {
      showSetDataList: false,
      setIndex: '',
      // 温湿度
      firObj: {
        maxH: '',
        minH: '',
        minT: '',
        maxT: ''
      },
      // 氨气
      gasObj: {
        maxAq: '',
        minAq: '',
        maxTrd: '',
        minTrd: '',
        maxTrddl: '',
        minTrddl: '',
        maxTrfl: '',
        minTrfl: '',
        maxTrj: '',
        minTrj: '',
        maxTrl: '',
        minTrl: '',
        maxTrsjd: '',
        minTrsjd: ''
      },
      testVal: '',
      showDataList: false,
      mySwitchCount: 0,
      allSwitchData: [],
      recodeTag: '',
      showAllSwitch: false,
      CurrentIndex: '',
      switchFrom: {
        switchId: '',
        num: '',
        value: 0 // 0 关 / 1 开
      },
      switchRules: {
        switchId: [
          { required: true, trigger: 'change', message: '请选择网关' }
        ],
        num: [
          { required: true, trigger: 'change', message: '请选择网关' }
        ]
      },
      switchDeviceShow: false,
      step: 1,
      tahValue: '',
      tahId: '',
      deviceTypeID: 0,
      stratData: this.deciveArr,
      myRuleId: this.ruleId,
      DeviceShow: false,
      contentList: [],
      tahStartList: [],
      switchStartList: [],
      switchAddData: [],
      switchIndex: undefined,
      demoArr: [
        {
          tahName: '',
          maxH: '',
          maxT: '',
          minH: '',
          minT: '',
          switchRuleList: [
            {
              switchId: 0,
              value: 0
            }
          ]
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 设置 -- pupop
    closeShowData (val) {
      if (this.deviceTypeID === 1) {
        this.firObj = {
          maxH: null,
          minH: null,
          minT: null,
          maxT: null
        }
        if (val === 1) {
          this.showDataList = false
        } else {
          this.showSetDataList = false
        }
      } else {
        this.gasObj = {
          maxAq: '',
          minAq: '',
          maxTrd: '',
          minTrd: '',
          maxTrddl: '',
          minTrddl: '',
          maxTrfl: '',
          minTrfl: '',
          maxTrj: '',
          minTrj: '',
          maxTrl: '',
          minTrl: '',
          maxTrsjd: '',
          minTrsjd: ''
        }
        if (val === 1) {
          this.showDataList = false
        } else {
          this.showSetDataList = false
        }
      }
    },
    // 添加 区间数据
    submitSetData () {
      if (this.deviceTypeID === 1) {
        // let tag = true
        // for (const key in this.firObj) {
        //   if (this.firObj[key] === null || this.firObj[key] === '') {
        //     tag = false
        //   }
        // }
        // if (!tag) {
        //   this.$message({
        //     message: '请完整填写！',
        //     type: 'error'
        //   })
        // } else {
        this.contentList.push({
          tagDeviceType: this.deviceTypeID,
          tahName: this.tahValue,
          tahId: this.tahId,
          maxH: this.firObj.maxH,
          maxT: this.firObj.maxT,
          minH: this.firObj.minH,
          minT: this.firObj.minT,
          switchRuleList: []
        })
        this.showDataList = false
        this.firObj = {
          maxH: null,
          minH: null,
          minT: null,
          maxT: null
        }
        // }
      } else {
        // let tag = true
        // for (const key in this.gasObj) {
        //   if (this.gasObj[key] === null || this.gasObj[key] === '') {
        //     tag = false
        //   }
        // }
        // if (!tag) {
        //   this.$message({
        //     message: '请完整填写！',
        //     type: 'error'
        //   })
        // } else {
        this.contentList.push({
          tagDeviceType: this.deviceTypeID,
          tahName: this.tahValue,
          tahId: this.tahId,
          maxAq: this.gasObj.maxAq,
          minAq: this.gasObj.minAq,
          maxTrd: this.gasObj.maxTrd,
          minTrd: this.gasObj.minTrd,
          maxTrddl: this.gasObj.maxTrddl,
          minTrddl: this.gasObj.minTrddl,
          maxTrfl: this.gasObj.maxTrfl,
          minTrfl: this.gasObj.minTrfl,
          maxTrj: this.gasObj.maxTrj,
          minTrj: this.gasObj.minTrj,
          maxTrl: this.gasObj.maxTrl,
          minTrl: this.gasObj.minTrl,
          maxTrsjd: this.gasObj.maxTrsjd,
          minTrsjd: this.gasObj.minTrsjd,
          switchRuleList: []
        })
        this.showDataList = false
        this.gasObj = {
          maxAq: '',
          minAq: '',
          maxTrd: '',
          minTrd: '',
          maxTrddl: '',
          minTrddl: '',
          maxTrfl: '',
          minTrfl: '',
          maxTrj: '',
          minTrj: '',
          maxTrl: '',
          minTrl: '',
          maxTrsjd: '',
          minTrsjd: ''
        }
        // }
      }
    },
    updateSetData () {
      if (this.deviceTypeID === 1) {
        this.contentList[this.setIndex] = {
          tagDeviceType: this.deviceTypeID,
          tahName: this.tahValue,
          tahId: this.tahId,
          maxH: this.firObj.maxH,
          maxT: this.firObj.maxT,
          minH: this.firObj.minH,
          minT: this.firObj.minT,
          switchRuleList: []
        }

        this.showSetDataList = false
        this.firObj = {
          maxH: null,
          minH: null,
          minT: null,
          maxT: null
        }
      } else {
        this.contentList[this.setIndex] = {
          tagDeviceType: this.deviceTypeID,
          tahName: this.tahValue,
          tahId: this.tahId,
          maxAq: this.gasObj.maxAq,
          minAq: this.gasObj.minAq,
          maxTrd: this.gasObj.maxTrd,
          minTrd: this.gasObj.minTrd,
          maxTrddl: this.gasObj.maxTrddl,
          minTrddl: this.gasObj.minTrddl,
          maxTrfl: this.gasObj.maxTrfl,
          minTrfl: this.gasObj.minTrfl,
          maxTrj: this.gasObj.maxTrj,
          minTrj: this.gasObj.minTrj,
          maxTrl: this.gasObj.maxTrl,
          minTrl: this.gasObj.minTrl,
          maxTrsjd: this.gasObj.maxTrsjd,
          minTrsjd: this.gasObj.minTrsjd,
          switchRuleList: []
        }
        this.showSetDataList = false
        this.gasObj = {
          maxAq: '',
          minAq: '',
          maxTrd: '',
          minTrd: '',
          maxTrddl: '',
          minTrddl: '',
          maxTrfl: '',
          minTrfl: '',
          maxTrj: '',
          minTrj: '',
          maxTrl: '',
          minTrl: '',
          maxTrsjd: '',
          minTrsjd: ''
        }
      }
    },
    setDataListFun (index, type, name, id) {
      this.setIndex = index
      this.tahValue = name
      this.tahId = id
      console.log(index, type, name, id)

      this.deviceTypeID = type
      this.showSetDataList = true
      if (type === 1) {
        this.firObj = this.contentList[this.setIndex]
      } else {
        this.gasObj = this.contentList[this.setIndex]
      }
    },
    changeSwitch (val) {
      this.switchIndex = this.switchStartList.findIndex(item => item.id === val)
      this.mySwitchCount = this.switchStartList[this.switchIndex].switchCount
    },
    deleteContentData (val) {
      this.contentList.splice(val, 1)
    },
    closeTah () {
      this.DeviceShow = false
    },
    closePopup () {
      this.contentList = []
      this.$emit('closePopup')
    },
    submitButton () {
      const saveArr = JSON.stringify(this.contentList)
      const getArr = JSON.parse(saveArr)
      console.log(saveArr)
      if (getArr.length === 0) {
        this.$message({
          message: '请选择温湿度设备',
          type: 'error'
        })
        return false
      }
      for (const el of getArr) {
        if (el.maxH === '' ||
          el.maxT === '' ||
          el.minH === '' ||
          el.minT === '') {
          this.$message({
            message: '数据填写不完整，请检查后提交',
            type: 'error'
          })
          return ''
        }
        for (const elSon of el.switchRuleList) {
          elSon.value = elSon.value === true ? 1 : 0
        }
      }
      console.log(getArr)

      const obj = {
        componentId: this.myRuleId,
        tahRuleList: getArr
      }
      componentRuleAdd(obj).then(res => {
        if (res.code === '200') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.contentList = []
          this.closePopup()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    addSwitchRule () {
      this.DeviceShow = true
    },
    addSwitchAgain () {
      this.showAllSwitch = false
      this.switchDeviceShow = true
    },
    deleltSwitch (val) {
      this.allSwitchData.splice(val, 1)
    },
    // 第一次添加开关
    addSwitchData (index, val) {
      this.CurrentIndex = index
      this.recodeTag = val
      if (
        this.contentList[index].maxH === '' ||
        this.contentList[index].minH === '' ||
        this.contentList[index].maxT === '' ||
        this.contentList[index].minT === '') {
        this.$message({
          message: '请填写温湿度值',
          type: 'error'
        })
      } else if (this.switchStartList.length > 0) {
        this.switchDeviceShow = true
        return ''
      } else {
        for (const el of this.stratData) {
          if (el.deviceType === 2) {
            this.switchStartList.push(el)
          }
        }
        this.switchDeviceShow = true
      }
    },
    // 查看全部开关
    watchAllSwitch (index, val) {
      this.allSwitchData = this.contentList[index].switchRuleList
      this.showAllSwitch = true
    },
    // 保存开关列表
    verifySwitch () {
      this.$refs.numberValidateForm.validate((valid) => {
        if (valid) {
          const label = this.$refs.optionSwitchRef.selected.label
          const id = this.$refs.optionSwitchRef.selected.value
          this.contentList[this.CurrentIndex].switchRuleList.push({
            switchName: label,
            switchId: id,
            num: this.switchFrom.num,
            value: this.switchFrom.value
          })
          this.switchDeviceShow = false
        }
      })
    },
    // 设备 -- select
    beforVerifyFun (val) {
      this.tahValue = val.name
      this.deviceTypeID = val.deviceType
      this.tahId = val.id
      console.log(val)
    },
    verifyTah () {
      if (this.tahValue === '') {
        this.$message({
          message: '请选择设备',
          type: 'error'
        })
      } else {
        this.DeviceShow = false
        this.showDataList = true
      }
    },
    addFirRuleFun () {
      if (this.tahStartList.length > 0) {
        this.DeviceShow = true
        return ''
      } else {
        for (const el of this.stratData) {
          if (el.deviceType !== 0 && el.deviceType !== 2 && el.deviceType !== 4) {
            this.tahStartList.push(el)
          }
        }
        this.DeviceShow = true
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.setLineBox {
  width: 98%;
  height: 50px;
  display: flex;
  .firtitleBox {
    width: 120px;
    line-height: 50px;
    font-weight: 600;
    text-align: center;
  }
  .indextitle {
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: 600;
  }
  .centerModule {
    width: 370px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: 600;
  }
  .titleBoxSwitch {
    width: 100px;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
  }
  .titleBox {
    width: 80px;
    line-height: 50px;
    text-align: center;
    font-weight: 600;
  }
}
.realBox {
  width: 98%;
  height: 30px;
  display: flex;
  margin-bottom: 20px;
  .indextitle {
    width: 50px;
    line-height: 30px;
    text-align: center;
  }
  .firvalueBox {
    width: 120px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    //超出一行省略号
    div {
      white-space: nowrap; //禁止换行
      overflow: hidden;
      text-overflow: ellipsis; //...
    }
  }
  .outSideBox {
    width: 370px;
    display: flex;
    .valueBox {
      text-align: center;
      border: 1px solid #000;
      border-radius: 5px;
      margin-left: 5px;
      width: 40px;
      padding: 0 5px;
      line-height: 30px;
    }
    .lastValueBox {
      text-align: center;
      border: 1px solid #000;
      border-radius: 5px;
      margin-left: 5px;
      width: 100px;
      cursor:pointer;
      font-size: 12px;
      color: #3114d4;
      padding: 0 5px;
      line-height: 30px;

    }
  }
  .valueBox_icon {
    text-align: center;
    width: 70px;
    line-height: 30px;
    position: relative;
    .el-icon-plus {
      position: absolute;
      top: 0;
      right: 50%;
      transform: translateX(20px);
    }
    .el-icon-delete {
      position: absolute;
      top: 0;
    }
  }
  .valueBoxSwitch {
    text-align: center;
    width: 100px;
    line-height: 30px;
    position: relative;
    .el-icon-circle-plus {
      position: absolute;
      top: 0;
      right: 50%;
      transform: translateX(10px);
    }
    .setColor {
      color: #3114d4;
      line-height: 30px;
      cursor:pointer;
    }
  }
}
.addFirRule {
  width: fit-content;
  margin: 0 auto;
}
.fillOutData {
  width: 98%;
  flex-wrap: wrap;
  display: flex;
  .inputBox {
    width: 70px;
    margin-right: 10px;
    height: 70px;
  }
}
</style>
